
import React, { Component } from "react";
import { Form, Input, Button, Checkbox, message } from 'antd';
import { login } from "../../services/apis";
import  loginUrl  from "../../assets/images/loginBg.png";
import styles from './login.module.css'

export default class extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loadings: false
    };
  }

  componentDidMount() {
    window.scrollTo(0, 0);
  }

  onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

   onFinish = async (values) => {
    console.log('Success:', values);
     this.setState({loadings: true})
     window.sessionStorage.setItem('tokens',"b3898ef2-3dbb-45ce-a8cc-79acbb4139f6" );
     window.sessionStorage.setItem('user', values.userName);
     window.sessionStorage.setItem('userType', "admin");
     setTimeout(() => {
       this.setState({loadings: false},()=>{
         message.success('登陆成功!');
         this.setState({loadings: false});
         this.props.history.push('/dashboard/infoManage')
       })
     }, 1500);
    // const res = await login({
    //   userName: values.userName,
    //   userPwd: values.password,
    // });
    // if (res.code === 0 ) {
    //   if(res.data.token && res.data.user){
    //     window.sessionStorage.setItem('tokens', res.data.token);
    //     window.sessionStorage.setItem('user', res.data.user);
    //     window.sessionStorage.setItem('userType', res.data.userType);
    //     setTimeout(() => {
    //       this.setState({loadings: false},()=>{
    //         message.success('登陆成功!');
    //         this.setState({loadings: false});
    //         this.props.history.push('/dashboard/infoManage')
    //       })
    //     }, 1500);
    //   }else{
    //     message.error('账号或密码错误！');
    //   }
    // } else {
    //   message.error('账号或密码错误！');
    // }

  };


  render() {
    const {  loadings } = this.state;
    return (
      <>
        <div className={styles.bg} >
          {/* <img style={{width:'100%'}} src={loginUrl}>
          </img> */}
          <div className={styles.titleBox}>
              <div className={styles.titles}>西安市城市运营管理中心</div>
              <div className={styles.text}>简约 / 高效 / 安全</div>
          </div>          
          <div className={styles.boxs}>
            <h1 style={{color:'#666',fontWeight:500,fontSize:26,fontFamily:'fantasy',textAlign:"center"}}>城市运营中心管理系统</h1>
            <Form
                style={{width:'90%',margin:'80px auto',fontSize:18}}
                name="basic"
                initialValues={{ remember: true }}
                onFinish={this.onFinish}
                onFinishFailed={this.onFinishFailed}
                autoComplete="off"
              >
                <Form.Item
                  label="用户名"
                  name="userName"
                  rules={[{ required: true, message: 'Please input your username!' }]}
                >
                  <Input />
                </Form.Item>
                <Form.Item
                  label="密码箱 "
                  name="password"
                  rules={[{ required: true, message: 'Please input your password!' }]}
                >
                  <Input.Password />
                </Form.Item>
                <Form.Item name="remember" valuePropName="checked">
                  <Checkbox>记住我</Checkbox>
                </Form.Item>
                <Form.Item>
                  <Button type="primary" loading={loadings} style={{width:300,height:38,marginLeft:68,cursor:'pointer'}} htmlType="submit">
                    登录
                  </Button>
                </Form.Item>
              </Form>  

          </div>
        </div>
        <div className={styles.footer}>
          <div>Copyright © 2018-{new Date().getFullYear()} 版权归江心集团企业所有.   解释权归江心集团所有.</div>
        </div>
      </>
    )
    }
}
